import React from "react";

// 导入样式
import styles from "./index.module.css";

// 导入antd-mobile组件库
import { Flex, WhiteSpace, WingBlank, Toast } from "antd-mobile";

import { Link } from "react-router-dom";
// 导入NavHeader
import NavHeader from "../../components/NavHeader";
// 导入axios
import { API } from "../../utils/api";
// 导入Formik高阶组件绑定Login组件
import { withFormik,Form,Field,ErrorMessage } from "formik";
// 导入yup进行表单验证
import * as Yup from "yup";

// 验证规则
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/;
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/;
class Login extends React.Component {
  // state = {
  //   username: "",
  //   password: ""
  // };
  // getUserName = e => {
  //   this.setState({
  //     username: e.target.value
  //   });
  // };
  // getPassWord = e => {
  //   this.setState({
  //     password: e.target.value
  //   });
  // };
  // //   提交表单的处理方法
  // handleSubmit = async e => {
  //   // 阻止默认提交行为
  //   e.preventDefault();
  //   const { username, password } = this.state;
  //   const { data: res } = await API.post(`/user/login`, {
  //     username,
  //     password
  //   });
  //   const { status, description, body } = res;
  //   if (status === 200) {
  //     // 登入成功
  //     window.localStorage.setItem("token", body.token);
  //     // 返回上个页面
  //     this.props.history.go(-1);
  //   } else {
  //     // 登录失败
  //     Toast.info(`${description}`, 1);
  //     this.setState(()=>{
  //         return{
  //           username: '',
  //           password: ''
  //         }
  //     })
  //   }
  // };
  render() {
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />
        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field  className={styles.input} name="username" placeholder="请输入账号"/>
            </div>
            <ErrorMessage className={styles.error} name="username" component="div"/>
            <WhiteSpace size="md" />

            <div className={styles.formItem}>
            <Field  className={styles.input} name="password" type="password" placeholder="请输入密码"/>
            </div>
            <ErrorMessage className={styles.error} name="password" component="div"/>
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没账号， 去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    );
  }
}
// 使用withFormik高阶组件包裹Login组件,为Login组件提供属性和方法
Login = withFormik({
  // 提供状态
  mapPropsToValues: () => ({ username: "", password: "" }),
  // 添加表单验证规则
  validationSchema: Yup.object().shape({
    username: Yup.string()
      .required("账号为必填项")
      .matches(REG_UNAME, "长度为5~8位,只能使用数字，字母，下划线"),
    password: Yup.string()
      .required("密码为必填项")
      .matches(REG_PWD, "长度为5~12位,只能使用数字，字母，下划线")
  }),
  // 提供提交事件
  handleSubmit: async (values, { props }) => {
    const { username, password } = values;
    const { data: res } = await API.post(`/user/login`, {
      username,
      password
    });
    const { status, description, body } = res;
    if (status === 200) {
      // 登入成功
      window.localStorage.setItem("token", body.token);
      // 返回上个页面
      if (!props.location.state) {
        return  props.history.go(-1);
      } else {
        props.history.replace(props.location.state.form.pathname)
      }
      // 注意这里面获取不到this,只使用高阶组件的props指向Login里的history
    } else {
      // 登录失败
      Toast.info(`${description}`, 1);
    }
  }
})(Login);
// 这里是的Login就是高阶组件包装之后的Login了
export default Login;
